<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>766-川渝体验店</title>
		<meta name="author" content="BIZ Team" />
		<meta name="copyright" content="BIZ" />
		<link href="${base}/resources/shop/css/common.css" rel="stylesheet" type="text/css" />
		<link href="${base}/resources/shop/css/style.css" rel="stylesheet" type="text/css" />
		<link href="${base}/resources/shop/css/new_map.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
		<script type="text/javascript" src="${base}/resources/shop/js/jquery.js"></script>
		
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=45cf177a1ff670ce5026ce81856242a5"></script>
		<link href="${base}/resources/shop/css/customer.css" rel="stylesheet" type="text/css" />
		
		<style type="text/css">
.info-title {
    background-color: rgba(0, 155, 255, 0.8);
    color: white;
    font-size: 14px;
    font-weight: lighter;
    letter-spacing: 1px;
    line-height: 26px;
    padding: 0 0 0 6px;
}
		</style>
	</head>
	<body>
		[#include "/shop/include/login_header.ftl" /]
		<div class="mp-wrap">
			<div class="container map-box">
				
			</div>
		</div>
		<div class="container map-con">
			<div class="path">
				<ul>
					<li>
						<a href="${base}/">${message("shop.path.home")}</a>
					</li>
					<li class="last">全国体验店</li>
				</ul>
			</div>
			<div class="search-group">
				<form action="list.jhtml" method="post">
		 			<select class="option" name="provinceId">
					 	<option value="">--请选择--</option>
						[#list parentList as li]
							<option value="${li.id}">${li.name}</option>
					 	[/#list]
					 </select>
					 <select class="option selectedCity" id="selectCity" name="cityId">
					 	<option value="">--请选择--</option>
					 	[#list getChildrenListOne as liOne]
					 		<option value="${liOne.id}">${liOne.name}</option>
					 	[/#list]
					 </select>
					 <select class="option" name="areaId">
					 	<option value="">--请选择--</option>
					 	[#list getChildrenListTwo as liTwo]
					 		<option value="${liTwo.id}">${liTwo.name}</option>
					 	[/#list]
					 </select>
					 
					<input type="submit" id="searchBtn" class="search-btn" value="搜索" />
				</form>
			</div>
			<div class="area-filter">
				<dl class="store-type clearfix">
					<dt>门店类型</dt>
					<dd>
						<ul>
							[#--<li><a href="${base}/shops/list.jhtml?storeType&cityId=${shops.cityId}" class="[#if shops.storeType==null]seletced[/#if]">全部</a></li>--]
							[#list dv as dv]
								[#if dv.id!=43]
									<li><a href="${base}/shops/list.jhtml?storeType=${dv.id}&cityId=${shops.cityId}" info="${shops.storeType}" class="[#if shops.storeType==dv.id]seletced[/#if]">${dv.title}</a></li>
								[/#if]
							[/#list]
						</ul>
					</dd>
				</dl>
				
				[#-- <dl class="address clearfix">
					<dt>门店地址</dt>
					<dd>
						<a href="${base}/shops/list.jhtml?storeType=${shops.storeType}&provinceId=" class="[#if shops.provinceId==null]seletced[/#if]">全部</a>
							[#list shopsArea as  shopsArea]
							<span><a href="${base}/shops/list.jhtml?provinceId=${shopsArea.id}" info="${shops.provinceId},${shopsArea.id}" class="[#if shops.provinceId==shopsArea.id]seletced[/#if]">[${shopsArea.name}]</a></span>
							[/#list]
					</dd>
				</dl>
				<dl class="address clearfix">
					<dt>&nbsp;&nbsp;&nbsp;&nbsp;</dt>
					<dd>
						<a href="${base}/shops/list.jhtml?storeType=${shops.storeType}&provinceId=${shops.provinceId}&cityId=" class="[#if shops.provinceId==null]seletced[/#if]" info="${shops.provinceId}">[#if shopsAreaChildren?has_content]全部[/#if]</a>
						<span></span>
						[#list shopsAreaChildren as shopsAreaChildren]
							<a href="${base}/shops/list.jhtml?storeType=${shops.storeType}&provinceId=${shops.provinceId}&cityId=${shopsAreaChildren.id}" class="[#if shops.cityId==shopsAreaChildren.id]seletced[/#if]">[${shopsAreaChildren.name}]</a>
						[/#list]
					</dd>
				</dl>
				<dl class="address clearfix">
					<dt>&nbsp;&nbsp;&nbsp;&nbsp;</dt>
					<dd>
						<a href="${base}/shops/list.jhtml?storeType=${shops.storeType}&provinceId=${shops.provinceId}&cityId=${shops.cityId}&areaId=" class="[#if shops.cityId==null]seletced[/#if]" info="${shops.cityId}">[#if shopsAreaChildrens?has_content]全部[/#if]</a>
						<span></span>
						[#list shopsAreaChildrens as shopsAreaChildrens]
							<a href="${base}/shops/list.jhtml?storeType=${shops.storeType}&provinceId=${shops.provinceId}&cityId=${shops.cityId}&areaId=${shopsAreaChildrens.id}" class="[#if shops.areaId==shopsAreaChildrens.id]seletced[/#if]">[${shopsAreaChildrens.name}]</a>
						[/#list]
					</dd>
				</dl>--]
			</div>
			<div class="clearfix map-bottom">
				<div class="store-list new_hide">
					<ul>
					[#list page.content as pa]
						<li class="list">
							<div class="sortArea">${pa_index+1}</div>
							<div class="txtArea">
								<h3>${pa.shopsName}</h3>
								<div class="hidden txt-details">
									<p>
										地址：
										<span class="store_addr">${pa.address}</span>
									</p>
									<p >联系人：<span class="store_contacts">${pa.contactP}</span></p>
									<p>电话：<span class="store_phone">${pa.contactT}</span></p>
									<p>门店等级：<span class="store_grade">${pa.shopsLevelName}</span></p>
									<p>服务区域：<span class="store_area">${pa.areaName}</span></p>
									<input class="hidden coordinateX" name="gpsX" value="${pa.gpsX}"/>
									<input class="hidden coordinateY" name="gpsY" value="${pa.gpsY}"/>
								</div>
							</div>
						</li>
					[/#list]
					</ul>
					[@pagination pageNumber = page.pageNumber totalPages = page.totalPages]
						[#include "/shop/include/pagination.ftl"]
					[/@pagination]
				</div>
				
				<input class="hidden ip" name="ip" value="${ip}"/>
				<div class="new_store-map store-map" id="container"></div><!-- 地图div -->
			</div>
		</div>
		[#include "/shop/include/fastGetCase.ftl" /]
		[#include "/shop/include/footer.ftl" /]
	</body>
	<script type="text/javascript" src="${base}/resources/shop/js/common.js"></script>
	<script type="text/javascript" src="${base}/resources/shop/js/public.js"></script>
	<script type="text/javascript" src="${base}/resources/shop/js/jQuery-jcContact.js"></script>
	<link href="${base}/resources/shop/css/customer.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	
	
	
	
	$().ready(function() {
			$("[name=provinceId] option[value=${shops.provinceId}]").attr("selected", "selected");
			$("[name=cityId] option[value=${shops.cityId}]").attr("selected", "selected");
			$("[name=areaId] option[value=${shops.areaId}]").attr("selected", "selected");
	
			var $list =$(".store-list li");
			
			var map = new AMap.Map('container',{resizeEnable: true});   //创建地图
			map.setZoom(10);              //设置地图级别
		    map.setCenter([116.39,39.9]);     //设置地图中心点
			
		    var gpsX=[],gpsY=[];      //储存经纬度，这里x是经度，y是维度，
			$(".coordinateX").each(function(i,the){
				gpsY[i] =the.value;
				gpsX[i] =$(".coordinateY")[i].value;
				
				
				var marker = new AMap.Marker({      //添加标点
			        position: [gpsX[i], gpsY[i]],
			        map:map
			    });
				
				
				var licontent="<div class='info-title'>766体验店</div><div><strong>地址：</strong><span>"+$(this).parents(".store-list li").find(".store_addr").text()+"</span></div>";
			    licontent+="<div><strong>联系人：</strong><span>"+$(this).parents(".store-list li").find(".store_contacts").text()+"</span></div>";
			    licontent+="<div><strong>电话：</strong><span>"+$(this).parents(".store-list li").find(".store_phone").text()+"</span></div>";
			    licontent+="<div><strong>门店等级：</strong><span>"+$(this).parents(".store-list li").find(".store_grade").text()+"</span></div>";
			    licontent+="<div><strong>服务区域：</strong><span>"+$(this).parents(".store-list li").find(".store_area").text()+"</span></div>";
			    AMap.plugin('AMap.AdvancedInfoWindow',function(){
			    	  var infowindow = new AMap.AdvancedInfoWindow({
			    	    content: licontent,
			    	    offset: new AMap.Pixel(0, -30),
			    	    asOrigin:true
			    	  });
				 
				 
				 var clickHandle = AMap.event.addListener(marker, 'mouseover', function() {
					    infowindow.open(map, marker.getPosition())
					})
			    })
				 
				 
			});
		    
			AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){           //添加控件
			    var toolBar = new AMap.ToolBar();
			    var scale = new AMap.Scale();
			    map.addControl(toolBar);
			    map.addControl(scale);
			})
		    
			
			
			
			
			
			map.plugin('AMap.Geolocation', function () {      //定位
			    geolocation = new AMap.Geolocation({
			        enableHighAccuracy: true,//是否使用高精度定位，默认:true
			        timeout: 20000,          //超过10秒后停止定位，默认：无穷大
			        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
			        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
			        showButton: true,        //显示定位按钮，默认：true
			        buttonPosition: 'RB',    //定位按钮停靠位置，'RB'，右下角
			        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
			        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
			        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
			        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
			        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
			    });
			    map.addControl(geolocation);
			    geolocation.getCurrentPosition();
			    AMap.event.addListener(geolocation, 'complete', function(data){
			    	var userGpsX=data.position.getLng();
			    	var userGpsY=data.position.getLat();
			        
			      //************计算最近的点***************/
	                var near_gps_X;    //用于保存最近的点
	                var near_gps_Y;
	                var len = 0;
			        for(var i=0;i<gpsX.length;i++){     //获取到最近的点的经纬度
	             	   var lon;
	                    lon = ((userGpsX-gpsX[i])*(userGpsX-gpsX[i]))+((userGpsY-gpsY[i])*(userGpsY-gpsY[i]));
	             	   if(len==0){
	             		   near_gps_X = gpsX[i];
	             		   near_gps_Y = gpsY[i];
	             		   len=lon;
	             	   }else if(lon<len){
	             		   near_gps_X = gpsX[i];
	             		   near_gps_Y = gpsY[i];
	             		   len=lon;
	             	   }
	    			}
			        
			        AMap.service(["AMap.Driving"], function() {
			            var driving = new AMap.Driving({
			                map: map
			            }); //构造路线导航类
			            // 根据起终点坐标规划驾车路线
			            driving.search([userGpsX,userGpsY],[near_gps_X,near_gps_Y]);
			        });
			    });
			    
			    AMap.event.addListener(geolocation, 'error', function(data){});      //返回定位出错信息
			});
			
			
		  
			
			
			
		});

	
		// 添加自定义方法   
		$("[name=provinceId]").change(function(){
			var provinceId = $(this).val();
			$.ajax({
			    url:"${base}/shops/getChildrenByParentId.jhtml",    //请求的url地址
			    dataType:"json",   //返回格式为json
			    data:{"provinceId":provinceId},    //参数值
			    type:"GET",   //请求方式
			    success:function(req){
			        //请求成功时处理
			        $("[name=cityId]").empty();
			        $("[name=areaId]").empty();
			        $("[name=cityId]").append("<option value=''>--请选择--</option>");
			        $("[name=areaId]").append("<option value=''>--请选择--</option>");
			        for(var i=0;i<req.length;i++){
			        	$("[name=cityId]").append("<option value='"+req[i].id+"'"+"info='"+req[i].fullName+"'>"+req[i].name+"</option>");
			        }
			    },
			    error:function(){
			        //请求出错处理
			    }
			});
		});
		$("[name=cityId]").change(function(){
			var provinceId = $(this).val();
			$.ajax({
			    url:"${base}/shops/getChildrenByParentId.jhtml",    //请求的url地址
			    dataType:"json",   //返回格式为json
			    data:{"provinceId":provinceId},    //参数值
			    type:"GET",   //请求方式
			    success:function(req){
			        //请求成功时处理
			        $("[name=areaId]").empty();
			        $("[name=areaId]").append("<option value=''>--请选择--</option>");
			        if(req.length<1){
			        	$("[name=areaId]").remove();
			        }
			        if(req.length>0){
			        	$("[name=areaId]").remove();
			        	$(".search-btn").before("<select class='option' name='areaId'><option value=''>--请选择--</option></select>");
			        }
			        for(var i=0;i<req.length;i++){
			        	$("[name=areaId]").append("<option value='"+req[i].id+"'"+"info='"+req[i].fullName+"'>"+req[i].name+"</option>");
			        }

			    },
			    error:function(){
			        //请求出错处理
			    }
			});
		}); 
	</script>
</html>
